<script setup lang="ts">
import { ref, computed } from 'vue'
import { ProblemApi } from '@/api/ProblemApi'
import { message } from 'ant-design-vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
import type { AdminProblemVO } from '@/api/Problem'

interface Props {
  visible: boolean
  problem: AdminProblemVO | null
}

interface Emits {
  (e: 'update:visible', value: boolean): void
  (e: 'success'): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const loading = ref(false)

const handleClose = () => {
  if (!loading.value) {
    emit('update:visible', false)
  }
}

const handleConfirm = async () => {
  if (!props.problem?.id) {
    message.error('题目ID不存在')
    return
  }

  try {
    loading.value = true
    await ProblemApi.delete(props.problem.id)
    message.success('删除成功')
    
    // 先关闭弹窗，然后触发刷新
    loading.value = false
    emit('update:visible', false)
    emit('success')
  } catch (error) {
    console.error('删除题目失败:', error)
    message.error('删除题目失败')
    loading.value = false
  }
}

const difficultyLabel = computed(() => {
  if (!props.problem) return ''
  const difficultyMap: Record<number, string> = {
    0: '简单',
    1: '中等',
    2: '困难',
    3: '极难'
  }
  return difficultyMap[props.problem.difficulty] || '未知'
})

const difficultyColor = computed(() => {
  if (!props.problem) return 'default'
  const colorMap: Record<number, string> = {
    0: 'green',
    1: 'blue',
    2: 'orange',
    3: 'red'
  }
  return colorMap[props.problem.difficulty] || 'default'
})
</script>

<template>
  <a-modal
    :open="visible"
    title="删除题目"
    :confirmLoading="loading"
    :maskClosable="!loading"
    :closable="!loading"
    :keyboard="!loading"
    @cancel="handleClose"
    width="500px"
  >
    <template #closeIcon>
      <span class="text-gray-400 hover:text-gray-600">×</span>
    </template>

    <div class="py-4">
      <!-- 警告图标和提示 -->
      <div class="flex items-start gap-3 mb-6">
        <ExclamationCircleOutlined class="text-3xl text-red-500 mt-1" />
        <div class="flex-1">
          <h3 class="text-lg font-semibold text-gray-800 mb-2">
            确认删除该题目？
          </h3>
          <p class="text-sm text-gray-600">
            此操作将永久删除该题目及其相关数据，且无法恢复。请谨慎操作！
          </p>
        </div>
      </div>
    </div>

    <template #footer>
      <div class="flex justify-end gap-3">
        <a-button 
          @click="handleClose" 
          :disabled="loading"
          size="large"
          class="px-6"
        >
          取消
        </a-button>
        <a-button
          type="primary"
          danger
          @click="handleConfirm"
          :loading="loading"
          size="large"
          class="px-6"
        >
          确认删除
        </a-button>
      </div>
    </template>
  </a-modal>
</template>

<style scoped>
:deep(.ant-modal-header) {
  border-bottom: 1px solid #f0f0f0;
  padding: 16px 24px;
}

:deep(.ant-modal-body) {
  padding: 0 24px;
}

:deep(.ant-modal-footer) {
  border-top: 1px solid #f0f0f0;
  padding: 16px 24px;
}

:deep(.ant-modal-close-x) {
  width: 56px;
  height: 56px;
  line-height: 56px;
}
</style>
